export default {
  name: 'Users',
  data () {
    return {
      users: [],
      // 请求参数信息
      info: {
        // 模糊查询参数
        query: '',
        // 当前第几页
        pagenum: 1,
        // 一页显示多少条
        pagesize: 4
      },
      total: 0,
      // 用户的Dialog是否显示
      addUserDialog: false,
      // 添加用户的相关信息
      addUserInfo: {},
      // 添加表单的验证规则
      addUserRules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'change' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' },
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'change' }
        ]
      },
      // 编辑用户的Dialog 是否显示
      editUserDialog: false,
      // 编辑用户的相关信息
      editUserInfo: {
        id: 0,
        email: '',
        mobile: ''
      },
      // 权限分配是否显示
      rightsDialog: false,
      rightsInfo: {
        username: '',
        id: 0,
        rights: ''
      },
      rightsList: [
      ]
    }
  },
  created () {
    // 发送请求，请求数据列表
    this.getUsersList()
  },
  methods: {
    // 获取用户列表
    async getUsersList () {
      // 请求表中的数据
      const { data } = await this.$get('users', { params: this.info })
      // 把 data 中的数据赋值给 this.total
      this.total = data.total
      // data 中的数据 赋值给this.users
      this.users = data.users
    },
    closeAddUserDialogHandler () {
      this.$refs.addUser.resetFields()
      this.addUserInfo = {}
    },
    // 添加表单验证规则
    addUserHandler () {
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则填写表单'
          })
          return
        }
        const { meta } = await this.$post('/users', this.addUserInfo)
        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }
        this.$message({
          type: 'success',
          message: '添加用户成功'
        })
        this.addUserDialog = false
      })
    },
    // 修改用户状态时间处理函数
    async changeUserStateHandler (val) {
      const { meta } = await this.$http.put(`users/${val.id}/state/${val.mg_state}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户状态'
        })
      }
    },
    // 删除用户的事件处理函数
    async deleteUserHandler (id) {
      const { meta } = await this.$http.delete(`users/${id}`)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
        this.getUsersList()
      }
    },
    // 编辑用户的事件处理函数
    async showEditUserDialogHandler (id) {
      const { data } = await this.$get('users/' + id)
      this.editUserInfo.id = data.id
      this.editUserInfo.username = data.username
      this.editUserInfo.email = data.email
      this.editUserInfo.mobile = data.mobile
      this.editUserDialog = true
    },
    // 确认编辑的事件处理函数
    async editUserHandler () {
      const { meta } = await this.$put(`users/${this.editUserInfo.id}`, this.editUserInfo)
      console.log(meta)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '编辑用户信息成功'
        })
        this.editUserDialog = false
        this.getUsersList()
      }
    },
    // 展示分配权限对话框
    async showRightsHandler (val) {
      // 请求用户信息
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id
      // 发送请求 请求身份列表
      const { data } = await this.$get('roles')
      this.rightsList = data
      this.rightsDialog = true
    },
    // 确认权限分配
    async editRightHandler () {
      const { meta } = await this.$put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rights })
      console.log(meta)
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '设置用户角色成功'
        })
        // 再次请求列表数据
        this.getUsersList()
        this.rightsDialog = false
      }
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  },
  filters: {
    format (val) {
      const t = new Date(val * 1000)
      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()
      return `${year}年${month}月${date}日`
    }
  }
}
